Skip to content

Allow editing the HTML for the remove_button plugin#1050

Open
neilvcarvalho wants to merge 3 commits into
orchidjs:masterfrom
neilvcarvalho:nc/remove-append-remove-button
Open

Allow editing the HTML for the remove_button plugin#1050
neilvcarvalho wants to merge 3 commits into
orchidjs:masterfrom
neilvcarvalho:nc/remove-append-remove-button

Conversation

@neilvcarvalho

Copy link
Copy Markdown

The remove_button plugin currently uses a javascript:void(0) link that doesn't work well with a strict CSP, requiring unsafe CSP directives for them to work.

Inspired by how the clear_button plugin works, this Pull Request replaces the <a> element with a <div role="button"> element behind an html option that can be overridden. This will ensure that any application that can switch it for a proper button element can do it on the application side.

As part of this work, an unused append option was removed from the plugin. It was previously used by Selectize, and became a dead code path 6 years ago on 1cb332c.

The `remove_button` plugin currently uses a `javascript:void(0)` link
that doesn't work well with a strict CSP, requiring unsafe CSP
directives for them to work.

Inspired by how the `clear_button` plugin works, this commit replaces
the `<a>` element with a `<div role="button">` element behind an `html`
option that can be overridden. This will ensure that any application
that can switch it for a proper button element can do it on the
application side.
@neilvcarvalho

Copy link
Copy Markdown
Author

I built the plugin using this code and imported the plugin manually (instead of using the complete or popular builds). That allowed me to use this version of the plugin right away. Here's the gist: https://gist.github.com/neilvcarvalho/65c7608a1ef5520c0a17f55bc4e6ee8d

Diff to the original build: https://gist.github.com/neilvcarvalho/65c7608a1ef5520c0a17f55bc4e6ee8d/revisions

Comment thread src/plugins/remove_button/plugin.ts Outdated
tabindex : -1,
role : 'button',
html : (data:RBOptions) => {
return `<div class="${data.className}" title="${data.title}" role="${data.role}" tabindex="${data.tabindex}">${data.label}</div>`;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can open the door to XSS. Prefer something like:

html : (data:RBOptions) => {
  const el = document.createElement('div');

  el.className = data.className || '';
  el.title = data.title || '';
  el.setAttribute('role', data.role || 'button');
  el.tabIndex = data.tabindex ?? -1;
  el.textContent = data.label || '';

  return el;
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I added that on 43941da

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants